<template>
  <div class="inquiry-list">
    <div class="search-modal">
      <search
        @result-click="resultClick"
        @on-change="getResult"
        :results="results"
        v-model="value"
        position="fixed"
        @on-focus="onFocus"
        @on-cancel="onCancel"
        @on-submit="onSubmit"
        ref="search"></search>
    </div>
    <div class="flex-box-align today-cell" @click="$router.push({path: '/inquiry/appoint/list'})">
      <img src="../../images/calendar.png" alt="">
      <span>出诊计划</span>
      <span>{{today}}</span>
    </div>
    <div class="seven-calendar-wrapper">
        <ul class="flex-box-align">
          <li class="flex" v-for="(item, index) in weekList" :key="index" @click="handleClickDate(item.date, item.now)">
            <p>{{item.week}}</p>
            <p v-if="todayDate == item.date" v-bind:class="{active: clickDate == item.date}">今天</p>
            <p v-else v-bind:class="{active: clickDate == item.date}">{{item.date}}</p>
          </li>
        </ul>
    </div>
    <div class="list">
      <div class="head flex-box-align">
        <img src="../../images/inquiryPlan.png" alt="">
        <span>出诊计划</span>
      </div>
      <scroller lock-x scrollbar-y height="-40" use-pullup :pullup-config="pullupConfig2" ref="demo2" @on-pullup-loading="load2">
        <div class="">
          <ul>
            <li class="flex-box-align" v-for="(item, index) in dataList" :key="index" @click="linkToInquiryDetail(item.id)">
              <img :src="item.patientUserCoreDTO.images[0].fileUrl" alt="" v-if="item.patientUserCoreDTO.images.length">
              <img src="" alt="" v-else>
              <span>{{item.patientUserCoreDTO.trueName}}</span>
            </li>
          </ul>
        </div>
        <div v-if="noData" class="no-data">没有更多内容</div>
      </scroller>

    </div>
  </div>
</template>
<script>
  import { Search, Scroller } from 'vux';
  import {parseUrlParams} from "../../../wechat/static/util/util.js";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  let today = new Date();
  today.setTime(today.getTime());
  let nowadays = today.getFullYear()+"-" + (today.getMonth()+1 > 9 ? today.getMonth()+1 : '0'+(today.getMonth()+1)) + "-" + (today.getDate() > 9 ? today.getDate() : '0'+(today.getDate())),
      todayDate = today.getDate()

  let week = ["周日","周一","周二","周三","周四","周五","周六"]

  let newWeek = [];
  week.map( (item, index) => {
    let day1 = new Date();
    day1.setTime(day1.getTime()+24*index*60*60*1000);
    let weekDate = week[day1.getDay()];
    let now = day1.getFullYear()+"-" + (day1.getMonth()+1 > 9 ? day1.getMonth()+1 : '0'+(day1.getMonth()+1)) + "-" + day1.getDate()
    newWeek.push({week: weekDate, date: day1.getDate(), now: now})
  })
  export default {
    data() {
      return {
        today: nowadays,
        todayDate: todayDate,
        clickDate: todayDate,
        weekList: newWeek,
        dateList: [],

        results: [],
        value: "",
        dataList: [],
        patientList: [
          {id: "1",avatar: "http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff", name: "江涛"},
          {id: "2",avatar: "http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff", name: "况况"}
        ],
        pullupConfig2: {
          content: '上拉加载更多',
          downContent: '松开进行加载',
          upContent: '上拉加载更多',
          loadingContent: '加载中...'
        },
        pageIndex:1,
        dataForm:'',
        loading:true,
        noData:false
      }
    },
    components: {
      Search, Scroller
    },
    mounted() {
      this.getList(nowadays)
    },
    methods: {
      load2 () {
        if(!this.loading) return false;
        let { pageIndex, pageCount} = this.dataForm;
        if (pageCount <= this.pageIndex){
          setTimeout(() => {
            this.$refs.demo2.disablePullup()
            this.noData = true
          }, 100)
          return false;
        }
        this.loading = false;
        this.pageIndex++;
        setTimeout(() => {
          this.getList()
          this.$refs.demo2.donePullup()
        }, 100)
      },
      getList(params) {
        let url = CONSTANT.URL.VISIT.APPOINTLIST,
          param = {pageIndex: this.pageIndex, pageSize: 10}
        common.requestAjax(url, JSON.stringify({doctorId: "", queryDate: params}), param, (res) => {
          if (res.status == 200) {
            this.loading = true;
            let data = res.data,
              pageCount = data.pageCount,
              bussData = data.bussData
            if(pageCount == 0||pageCount == 1){
              this.$refs.demo2.disablePullup()
              this.noData = true
            }
            this.dataForm = data;
            this.dataList = this.pageIndex <= pageCount ? this.dataList.concat(bussData) : this.dataList

          } else {

          }
        })
      },
      resultClick (item) {
        this.$router.push({path: "/inquiry/detail", query: {id: item.id}})
      },
      getResult (val) {
        console.log('on-change', val)
        this.results = val ? this.getResult1(this.value) : []
      },
      getResult1(val) {
        let rs = []
        for (let i = 0; i < this.dataList.length; i++) {
          if (this.dataList[i].patientUserCoreDTO.trueName.indexOf(val) != -1) {
            rs.push({
              title: this.dataList[i].patientUserCoreDTO.trueName,
              id: this.dataList[i].id,
            })
          }
        }
        return rs
      },
      onSubmit () {
        this.$refs.search.setBlur()
        this.$vux.toast.show({
          type: 'text',
          position: 'top',
          text: 'on submit'
        })
      },
      onFocus () {
        console.log('on focus')
      },
      onCancel () {
        console.log('on cancel')
      },
      linkToInquiryDetail(id) {
        this.$router.push({path: "/inquiry/detail", query: {id: id}})
      },
      handleClickDate(date, now) {
        this.clickDate = date;
        let url = CONSTANT.URL.VISIT.APPOINTLIST,
          param = {pageIndex: this.pageIndex, pageSize: 10}
        common.requestAjax(url, JSON.stringify({doctorId: "", queryDate: now}), param, (res) => {
          if (res.status == 200) {
            this.loading = true;
            let data = res.data,
              pageCount = data.pageCount,
              bussData = data.bussData
            if(pageCount == 0||pageCount == 1){
              this.$refs.demo2.disablePullup()
              this.noData = true
            }
            this.dataForm = data;
            this.dataList = bussData
          } else {

          }
        })
      }
    }
  };
</script>
<style lang="less">
  .xs-plugin-pullup-container{
    font-size: 12px;
    bottom: -50px;
  }
  .no-data{
    padding-top: .5rem;
    color: #999;
    font-size: 14px;
    bottom: 0rem;
    text-align: center;
    position: relative;
  }
  .inquiry-list {
    height: 100%;
    background-color: #f4f4f4;
    font-size: .34rem;
    .search-modal {
      font-size: .36rem;
    }
    .today-cell {
      background-color: #fff;
      padding: .37rem .3rem;
      color: #111;
      border-bottom: 1px solid #e1e1e1;
      img {
        width: .33rem;
        margin-right: .24rem;
        vertical-align: middle;
      }
    }
    .seven-calendar-wrapper {
      ul {
        padding: .3rem;
        background-color: #fff;
        margin-bottom: .2rem;
        li {
          text-align: center;
          .active {
            text-align: center;

            border-radius: 50%;
            background-color: #0063AE;
            color: #fff;
          }
          p{
            margin: auto;
            &:first-child {
              margin-bottom: .12rem;
              font-size: .3rem;
            }
            &:last-child {
              width: .65rem;
              height: .65rem;
              line-height: .65rem;
              font-size: .24rem;
            }
          }
        }
      }
    }
    .list {
      background-color: #fff;
      .head {
        padding: .3rem;
        border-bottom: 1px solid #e1e1e1;
        img {
          width: .31rem;
          vertical-align: middle;
          margin-right: .24rem;
        }
      }
      ul {
        li {
          padding: .3rem 0;
          margin-left: .3rem;
          border-bottom: 1px solid #e1e1e1;
          &:last-child {
            border-bottom: none;
          }
          img {
            width: .76rem;
            height: .76rem;
            vertical-align: middle;
            margin-right: .24rem;
          }
          span {

          }
        }
      }

    }
  }
</style>
